<template>
  <div class="body">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="page-header">
            <h1>Horizontal timeline</h1>
          </div>
          <div style="display:inline-block;width:100%;overflow-y:auto;">
            <ul class="timeline timeline-horizontal">
              <li class="timeline-item">
                <div class="timeline-badge primary">
                  <i class="glyphicon glyphicon-check" />
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">励志故事</h4>
                    <p>
                      <small
                        class="text-muted"
                      ><i class="glyphicon glyphicon-time" />
                        24小时前</small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>
                      专升本成功上岸，考研究生一战有点可惜，想都没想直接二战。为了节省时间直接剪的头发和男孩子一样短，复习到头脑不清直接去卫生间洗头。二战直接以成绩第一成功上岸。
                    </p>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-badge success">
                  <i class="glyphicon glyphicon-check" />
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">屌丝逆袭</h4>
                    <p>
                      <small
                        class="text-muted"
                      ><i class="glyphicon glyphicon-time" /> 2小时前</small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>
                      模拟考试作弊全班前3，班里每个人都能看的出来，只是没有人说罢了，高考结果也是可想而知。
                    </p>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-badge info">
                  <i class="glyphicon glyphicon-check">图标</i>
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">天下难事，必作于易</h4>
                    <p>
                      <small
                        class="text-muted"
                      ><i class="glyphicon glyphicon-time" /> 11 hours ago
                      </small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>
                      你做三四月的事，在八九月自有答案。真正的努力，从来不需要世人皆知。
                    </p>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-badge danger">
                  <i class="glyphicon glyphicon-check" />
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">想瘦下来</h4>
                    <p>
                      <small
                        class="text-muted"
                      ><i class="glyphicon glyphicon-time" /> 11 hours
                        ago</small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>
                      办了一张健身卡，一星期后由于各种原因，再也没去.....
                      想考研，约上朋友去自习室，最后败给了游戏，自拍和朋友圈
                      所有的努力都是为了有个好结果，过程很棒，结果也很重要。
                      别假装努力，结果不会陪你演戏。
                    </p>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-badge warning">
                  <i class="glyphicon glyphicon-check" />
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">一个频频回望</h4>
                    <p>
                      <small
                        class="text-muted"
                      ><i class="glyphicon glyphicon-time" /> 11 hours
                        ago</small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>
                      醒来，才记起昨天是您三年前转身离去之日，一股铭心刻骨的聚念，愧疚让我再难入睡，尘封的记忆，不由自主地又定格在眼前。梦中，您用再度转身的背影，将密封的往事掀起，将心痛的滋味，让我继续品尝。
                    </p>
                  </div>
                </div>
              </li>
              <li class="timeline-item">
                <div class="timeline-badge">
                  <i class="glyphicon glyphicon-check" />
                </div>
                <div class="timeline-panel">
                  <div class="timeline-heading">
                    <h4 class="timeline-title">一日复一日</h4>
                    <p>
                      <small
                        class="text-muted"
                      ><i class="glyphicon glyphicon-time" /> 11 hours
                        ago</small>
                    </p>
                  </div>
                  <div class="timeline-body">
                    <p>
                      重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="page-header">
            <h1>Timeline</h1>
          </div>
          <ul class="timeline">
            <li class="timeline-item">
              <div class="timeline-badge">
                <i class="glyphicon glyphicon-off" />
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Mussum ipsum cacilds 1</h4>
                  <p>
                    <small
                      class="text-muted"
                    ><i class="glyphicon glyphicon-time" /> 11 hours ago via
                      Twitter</small>
                  </p>
                </div>
                <div class="timeline-body">
                  <p>
                    重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
                  </p>
                </div>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-badge">
                <i class="glyphicon glyphicon-check" />
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">adadf</h4>
                  <p>
                    <small
                      class="text-muted"
                    ><i class="glyphicon glyphicon-time" /> 11 hours ago
                    </small>
                  </p>
                </div>
                <div class="timeline-body">
                  <p>
                    重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
                  </p>
                </div>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-badge">
                <i class="glyphicon glyphicon-check" />
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">adfgds</h4>
                  <p>
                    <small
                      class="text-muted"
                    ><i class="glyphicon glyphicon-time" /> 11 hours ago</small>
                  </p>
                </div>
                <div class="timeline-body">
                  <p>
                    重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
                  </p>
                  <p>
                    重叠的树影，微风吹动，轻轻颤抖，一份浓浓的伤悲，一份挥之不去的思念藏匿其中，悄无声息地洒落一地。
                  </p>
                </div>
              </div>
            </li>
            <li class="timeline-item">
              <div class="timeline-badge">
                <i class="glyphicon glyphicon-check" />
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4 class="timeline-title">Mussum ipsum cacilds 4</h4>
                  <p>
                    <small
                      class="text-muted"
                    ><i class="glyphicon glyphicon-time" /> 11 hours ago via
                      Twitter</small>
                  </p>
                </div>
                <div class="timeline-body">
                  <p>
                    Mussum ipsum cacilds, vidis litro abertis. Consetis
                    adipiscings elitis. Pra lá , depois divoltis porris,
                    paradis. Paisis, filhis, espiritis santis. Mé faiz elementum
                    girarzis, nisi eros vermeio, in elementis mé pra quem é
                    amistosis quis leo. Manduma pindureta quium dia nois paga.
                    Sapien in monti palavris qui num significa nadis i pareci
                    latim. Interessantiss quisso pudia ce receita de bolis, mais
                    bolis eu num gostis.
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {}
}
</script>

<style scoped lang="scss">
$body-bg: #ffffff;
$text-color: #373737;
$gray-base: #494949;
$gray-darker: #222;
$gray-dark: #333;
$gray: #555;
$gray-light: #777;
$gray-lighter: #eee;
$brand-primary: #1f9eba;
$brand-success: #59ba1f;
$brand-info: #5bc0de;
$brand-warning: #d1bd10;
$brand-danger: #ba1f1f;

/* Timeline */
.timeline {
  list-style: none;
  padding: 20px;
  position: relative;
  &:before {
    top: 40px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eeeeee;
    left: 50%;
    margin-left: -1.5px;
  }
  .timeline-item {
    margin-bottom: 20px;
    position: relative;
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
    .timeline-badge {
      color: #fff;
      width: 54px;
      height: 54px;
      line-height: 52px;
      font-size: 22px;
      text-align: center;
      position: absolute;
      top: 18px;
      left: 50%;
      margin-left: -25px;
      background-color: $gray-dark;
      border: 3px solid $body-bg;
      z-index: 100;
      border-top-right-radius: 50%;
      border-top-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;
      i,
      .fa,
      .glyphicon {
        top: 2px;
        left: 0px;
      }
      &.primary {
        background-color: $brand-primary;
      }
      &.info {
        background-color: $brand-info;
      }
      &.success {
        background-color: $brand-success;
      }
      &.warning {
        background-color: $brand-warning;
      }
      &.danger {
        background-color: $brand-danger;
      }
    }
    .timeline-panel {
      position: relative;
      width: 46%;
      float: left;
      right: 16px;
      border: 1px solid $gray-light;
      background: $body-bg;
      border-radius: 2px;
      padding: 20px;
      -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
      &:before {
        position: absolute;
        top: 26px;
        right: -16px;
        display: inline-block;
        border-top: 16px solid transparent;
        border-left: 16px solid $gray-light;
        border-right: 0 solid $gray-light;
        border-bottom: 16px solid transparent;
        content: " ";
      }
      .timeline-title {
        margin-top: 0;
        color: inherit;
      }
      .timeline-body > p,
      .timeline-body > ul {
        margin-bottom: 0;
      }
      .timeline-body > p + p {
        margin-top: 5px;
      }
    }
  }
  .timeline-item:last-child {
    &:nth-child(even) {
      float: right;
    }
  }
  .timeline-item:nth-child(even) {
    .timeline-panel {
      float: right;
      left: 16px;
      &:before {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
      }
    }
  }
}
// .timeline-horizontal:extend(.timeline) {//继承不生效
.timeline-horizontal {
  list-style: none;
  position: relative;
  padding: 20px 0px 20px 0px;
  &:before {
    height: 3px;
    top: auto;
    bottom: 26px;
    left: 56px;
    right: 0;
    width: 100%;
    margin-bottom: 20px;
  }
  .timeline-item {
    display: table-cell;
    height: 280px;
    width: 20%;
    min-width: 320px;
    float: none !important;
    padding-left: 0px;
    padding-right: 20px;
    margin: 0 auto;
    vertical-align: bottom;
    .timeline-panel {
      top: auto;
      bottom: 64px;
      display: inline-block;
      float: none !important;
      left: 0 !important;
      right: 0 !important;
      width: 100%;
      margin-bottom: 20px;
      &:before {
        top: auto;
        bottom: -16px;
        left: 28px !important;
        right: auto;
        border-right: 16px solid transparent !important;
        border-top: 16px solid $gray-light !important;
        border-bottom: 0 solid $gray-light !important;
        border-left: 16px solid transparent !important;
      }
    }
    &:before,
    &:after {
      display: none;
    }
    .timeline-badge {
      top: auto;
      bottom: 0px;
      left: 43px;
    }
  }
}
</style>
